<template>
   <el-tabs type="border-card">
    <el-tab-pane label="我的试题">
      <div class="handle-box"> 
      <p>我的试题信息如下,请勾选考试试题</p>
      <el-input  class="handle-input"  placeholder="搜索"></el-input>
    </div>
      <el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="showData"   
			 	style="width: 100%;" 
        size="small"
        :row-key="getRowKeys"
        tooltip-effect="light"     
        border
				@selection-change="handleSelectionChange">
          <el-table-column   type="selection" :reserve-selection="true"
            width="35" />
              <el-table-column  prop="question_bank" label="题库"  align="center" width="80"></el-table-column>
              <el-table-column  prop="type" label="类型"  align="center" width="60"></el-table-column>
              <el-table-column  prop="difficulty" label="难度"  align="center" width="45"></el-table-column>
              <el-table-column  prop="question_stem"    label="题干" 
               :show-overflow-tooltip="true" align="center">

              </el-table-column>
              <el-table-column  prop="modified_by" label="创建人"  align="center" width="60"></el-table-column>
              <el-table-column   label="操作"  align="center" width="60">
                <el-button text>
                  <i class="iconfont icon-eye"/>
                </el-button>
              </el-table-column>
     </el-table>
    <!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					:small="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
    </el-tab-pane>
    <el-tab-pane label="他人试题">
      <div class="handle-box"> 
      <p>共享试题信息如下,请勾选考试试题</p>
      <el-input  class="handle-input"  placeholder="搜索"></el-input>
    </div>
    <el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="showData"   
			 	style="width: 100%;" 
        size="small"
        :row-key="getRowKeys"
        tooltip-effect="light"     
        border
				@selection-change="handleSelectionChange">
          <el-table-column   type="selection" :reserve-selection="true" width="35" />
              <el-table-column  prop="question_bank" label="题库"  align="center" width="80"></el-table-column>
              <el-table-column  prop="type" label="类型"  align="center" width="60"></el-table-column>
              <el-table-column  prop="difficulty" label="难度"  align="center" width="45"></el-table-column>
              <el-table-column  prop="question_stem"    label="题干" 
               :show-overflow-tooltip="true" align="center">

              </el-table-column>
              <el-table-column  prop="modified_by" label="创建人"  align="center" width="60"></el-table-column>
              <el-table-column   label="操作"  align="center" width="60">
                <el-button text>
                  <i class="iconfont icon-eye"/>
                </el-button>
              </el-table-column>
     </el-table>

    </el-tab-pane>
  </el-tabs>

  
</template>

<script setup>
import { ref, reactive,toRefs } from 'vue';
import { getTestK} from '../../../api/exam' ;
/**-----------------表格数据展示 极其分页组件----------------------- */	
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')

//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const showData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

/* ===获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据===*/
const getData = () => {
    getTestK({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
      showData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
	
};
getData();
//多选框权限
const props = defineProps({
	checkedData:[],
})
const {checkedData} = toRefs(props)
const emit  = defineEmits(['update:checkedData'])

const handleSelectionChange = (val) => {
  state.multipleSelection = val
  console.log(state.multipleSelection,'<<<<<<<<<state')
  emit('update:checkedData',state.multipleSelection)
}
//
const getRowKeys = (row)=>{
  return row.id
}
// 分页组件 每页展示数据量发生变化的方法
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
//分页组件 当前页码改变的时候调用的方法
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;   
  p{
    font-size: 13px;
    color: #676A6C;
    margin-bottom: 10px;
  }
}
.handle-input {
	width: 200px;
  height: 35px;
}
.queItem pre{
    flex: 1;
    background: rgba(0,10,32,.05);
    padding: 5px 10px;
    color: #000;
    line-height: 1.6;
    font-size: 14px;
    border-radius: 3px;
}
.test-stem{
    display: flex;
    padding: 5px 5px;
    text-align: center;
    background-color: #f3f3f3;
}

.queItem .queNum {
    width: 40px;
    text-align: right;
    padding-right: 10px;
}
.el-radio{
    margin-right: 5px;
}
.el-radio, .el-radio__input {
    line-height: 1;
    white-space: nowrap;
    outline: 0;
}
//选项的样式
.test-option{
  padding-left: 40px;
  .el-radio{
    width: 150px;
  }
  .el-checkbox{
    width: 150px;
  }
  
}
.radiosBoxs {
    padding: 10px 0 5px;
    width: auto;
    display: inline-block;
}
.test-footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 5px;
    text-align: left;
    background-color: #f3f3f3;
}
.mr10{
    margin-bottom: 10px;
}
</style>